<template>
	<view class="managerList">
		<view class="header-bg-block"></view>
		<view class="top">
			<image v-if="user_info.logo" class="shop-img" :src="`${host}${user_info.logo}`" mode="aspectFill"></image>
			<view class="name u-line-1">{{ user_info.title || user_info.name }}</view>
			<view class="tj" v-if="type == 1" @click="tj">上推荐</view>
			<view class="setting" @click="setting"><text class="iconfontPT iconshezhi"></text></view>
		</view>
		<view class="itembox">
			<view class="item" v-for="(item, index) in itemList" :key="index" @click="nextPage(item)" v-if="type == 1">
				<view class="iconfontsize"><text :class="item.img"></text></view>
				<text>{{ item.name }}</text>
			</view>
			<view class="item" v-for="(item, index) in itemList2" :key="index" @click="nextPage(item)" v-if="type == 2">
				<view class="iconfontsize"><text :class="item.img"></text></view>
				<text>{{ item.name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user_info: {
				logo:''
			},
			type: 0,
			itemList: [
				{
					img: 'iconfontPT iconsaoma',
					name: '扫码核销',
					url: ''
				},
				{
					img: 'iconfontPT iconcaiwuzhongxin',
					name: '财务中心',
					url: '/pages/shopmanager/cardmanager/index'
				},
				{
					img: 'iconfontPT iconshangpinguanli',
					name: '商品管理',
					url: '/pages/shopmanager/goodsManager/index'
				},
				{
					img: 'iconfontPT iconyuangongguanli',
					name: '员工管理',
					url: '/pages/shopmanager/staff'
				},
				{
					img: 'iconfontPT iconfuwudingdan',
					name: '服务订单',
					url: '/pages/shopmanager/service/index'
				},
				{
					img: 'iconfontPT iconpingjia',
					name: '用户评价',
					url: '/pages/shopmanager/evaluate/index'
				}
			],
			itemList2: [
				{
					img: 'iconfontPT iconshangpinguanli',
					name: '商品管理',
					url: '/pages/shopmanager/goodsManager/index'
				},
				{
					img: 'iconfontPT iconcaiwuzhongxin',
					name: '员工管理',
					url: '/pages/shopmanager/staff'
				},
				{
					img: 'iconfontPT iconfuwudingdan',
					name: '服务订单',
					url: '/pages/shopmanager/service/index'
				},
				{
					img: 'iconfontPT iconpingjia',
					name: '用户评价',
					url: '/pages/shopmanager/evaluate/index'
				}
			]
		};
	},
	computed:{
		host(){
			return this.$baseHost.car
		}
	},
	onLoad(option) {
		this.type = option.type;
		this.user_info = uni.getStorageSync('user_info');
		this.type = uni.getStorageSync('manager_type') || 0;
	},
	methods: {
		nextPage(item) {
			if (item.name === '扫码核销') {
				uni.scanCode({
					success(res) {
						console.log(res);
						uni.navigateTo({
							url: `/${res.path}`
						});
					}
				});
				return;
			}
			console.log(item.url);
			uni.navigateTo({
				url: item.url
			});
		},
		setting() {
			uni.navigateTo({
				url: '/pages/shopmanager/setting'
			});
		},
		tj() {
			uni.navigateTo({
				url: '/pages/shopmanager/tj'
			});
		}
	}
};
</script>

<style lang="less">
.managerList {
	padding: 30rpx;
	position: relative;
	
	.header-bg-block {
		background-color: #E41805;
		height: 100rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}
}

.top {
	padding: 30rpx;
	background-color: #fff;
	border-radius: 20rpx;
	box-shadow: 0rpx 3rpx 22rpx 5rpx rgba(153, 153, 153, 0.1);

	&::after {
		content: '';
		display: block;
		height: 0;
		overflow: hidden;
		clear: both;
	}

	.shop-img {
		width: 120rpx;
		height: 120rpx;
		float: left;
		border-radius: 50%;
	}

	.name {
		float: left;
		line-height: 120rpx;
		font-size: 34rpx;
		color: #333;
		margin: 0 30rpx;
		width: 240rpx;
	}

	.tj {
		float: left;
		width: 155rpx;
		height: 64rpx;
		background-color: #ffd163;
		color: #333;
		line-height: 64rpx;
		text-align: center;
		margin-top: 28rpx;
		border-radius: 10rpx;
	}

	.setting {
		float: right;
		padding-top: 42rpx;

		text {
			font-size: 36rpx;
		}
	}
}

.itembox {
	background-color: #fff;
	border-radius: 20rpx;
	margin-top: 30rpx;
	text-align: center;
	box-shadow: 0rpx 3rpx 22rpx 5rpx rgba(153, 153, 153, 0.1);

	&::after {
		content: '';
		display: block;
		height: 0;
		overflow: hidden;
		clear: both;
	}

	.item {
		width: 50%;
		float: left;
		padding: 30rpx 0;

		.iconfontsize {
			text {
				font-size: 44rpx;
			}
		}

		text {
			font-size: 28rpx;
			color: #333;
			line-height: 60rpx;
		}
	}
}
</style>
